<template>
<!-- 	积水险情 -->
	<view class="item_detail_box box_shadow" :style="!isUp ? hide : show">
		<pullUp :isUp.sync="isUp" ></pullUp>
		<scroll-view class="content" :scroll-y="isUp" :scroll-top="scrollTop" @scroll='handleScroll'>
			<view style="display: flex; justify-content: space-between;">
				<div @click="showArea = true" class="areaDiv">{{value}}</div>
			</view>
			<u-select v-model="showArea" :list="area" @confirm="confirm"></u-select>
			<ul class="numBox">
				<li>积水险情：{{totalAlert}}个</li>
			</ul>
			<u-table v-show="isUp">
				<u-tr>
					<u-th>险情名称</u-th>
					<u-th>积水深度</u-th>
				</u-tr>
				<u-tr v-for="item in tableList">
					<u-td>{{item.name}}</u-td>
					<u-td>{{item.waterLevel}}cm</u-td>
				</u-tr>
			</u-table>
		</scroll-view>
	</view>
</template>

<script>
	import pullUp from "./pull-up.vue";
	export default {
		data() {
			return {
				isUp: false, //默认收起状态
				show:"height: 800rpx;",
				hide:"height: 240rpx;",
				scrollTop:0,
				showArea:false,
				value:'天府区',  //下拉默认值
				area: [
					{
						value: '1',
						label: '天府区'
					},
					{
						value: '2',
						label: '天府区1'
					}
				],
				totalAlert:2, //超警戒
				totalGuarantee:3, //超保证
				tableList:[{
					name:'华阳双流街道积水',
					waterLevel:20
				},{
					name:'华阳双流街道积水',
					waterLevel:20
				},{
					name:'华阳双流街道积水',
					waterLevel:20
				},{
					name:'华阳双流街道积水',
					waterLevel:20
				},{
					name:'华阳双流街道积水',
					waterLevel:20
				},{
					name:'华阳双流街道积水',
					waterLevel:20
				}]
			}
		},
		components: {
			pullUp,
		},
		mounted() {
		},
		watch:{
			isUp(newVal){
				if(!newVal){
					this.scrollTop = Math.random();  
				}
			}
		},
		methods: {
			handleScroll(e){
				if(e.detail.scrollTop < -150){
					this.isUp = false
				}
			},
			confirm(e) {
				console.log(e);
				this.value = e[0].label
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>

